<template>
<div class='article-container'>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <!-- 面包屑导航
        https://element.eleme.cn/#/zh-CN/component/breadcrumb#tu-biao-fen-ge-fu -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>内容管理</el-breadcrumb-item>
        </el-breadcrumb>
      </div>

      <el-form ref="form" :model="form" label-width="80px">
<!-- 状态选择模块------------------------------start -->
         <Status  v-model="form.status"/>
<!-- 状态选择模块------------------------------end -->
<!-- 频道选择模块------------------------------start -->
          <!-- 这是获取父组件的值然后传递给子组件 相当于:value="form.channelId"=-->
         <Channel v-model="form.channelId"/>
<!-- 频道选择模块------------------------------end -->
<!-- 日期选择模块------------------------------start -->
        <el-form-item label="日期">
          <el-col :span="11">
            <el-date-picker
              type="daterange"
              placeholder="选择日期"
              v-model="form.date"
              style="width: 100%;"
              value-format="yyyy-MM-dd"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            ></el-date-picker>
          </el-col>
        </el-form-item>
<!-- 日期选择模块------------------------------end -->
        <el-form-item>
          <!-- daterange: 表示一个日期的区域，有起点和终点。 date日期，range:区域
          value-format： 绑定值的格式。不指定则绑定值为 Date 对象 -->
          <el-button type="primary" @click="sSelect" >查询</el-button>
        </el-form-item>
      </el-form>

         <!-- 数据表头-------------------------------start-->
    </el-card>
     <el-card style="margin-top:20px;">
      <div slot="header" class="clearfix">
        根据筛选条件查询到{{total_count}}条数据：当前第{{curPage}}页数据
      </div>
      <!-- 数据表头------------------------------------end-->
      <!-- 数据列表------------------------------------------------start -->
      <el-table
        :data="list"
        style="width: 100%">
        <el-table-column
          label="封面"
        >
         <!-- 对于自定义模板列
          1. 不需要设置prop
          2. slot-scope="scope" 用来指定在template中可以通过scope来获取当前行的信息
              scope.row: 表示当前行的数据，等于list
              scope.row.cover.images[0] 表示这一行中的封面的地址
          -->
        <template
        slot-scope="scope"
        >
          <el-image
           style="width:150px;height:100px"
           :src="scope.row.cover.images[0]"
           lazy
          >
         <div slot="placeholder" class="image-slot">
                加载中<span class="dot">...</span>
              </div>
          </el-image>
        </template>
        </el-table-column>
        <el-table-column
          prop="title"
          label="标题"
        >
        </el-table-column>
        <el-table-column
          label="状态"
        >
        <template slot-scope="scope">
            <!-- 0-草稿，1-待审核，2-审核通过，3-审核失败，4-已删除 -->
            <!-- {{scope.row.status}} -->
            <el-tag v-if="scope.row.status===0">草稿</el-tag>
            <el-tag v-else-if="scope.row.status===1" type="info">待审核</el-tag>
            <el-tag v-else-if="scope.row.status===2" type="success">审核通过</el-tag>
            <el-tag v-else-if="scope.row.status===3" type="warning">审核失败</el-tag>
            <el-tag v-else-if="scope.row.status===4" type="danger">已删除</el-tag>
        </template>
        </el-table-column>
        <el-table-column
          prop="pubdate"
          label="发布时间"
        >
        </el-table-column>
        <el-table-column
          label="操作">
          <template slot-scope="scope">
          <!-- type是按钮类型 -->
        <el-button
        type="primary"
        icon="el-icon-edit"
        circle
        @click="hEdit(scope.$index, scope.row)"
        >
        </el-button>
        <el-button type="danger"
        @click="hDelect(scope.$index, scope.row)"
        icon="el-icon-delete"
        circle
        >
        </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 数据列表------------------------------------------------end-->
      <!-- 分页功能-------------------------------start -->
      <el-pagination
        per_page="20"
        @current-change="hPageChange"
        style="margin-top:10px;"
        background
        layout="prev, pager, next"
        :total="total_count">
      </el-pagination>
      <!-- 分页功能-------------------------------end -->
    </el-card>
  </div>
</template>
<script>
import Channel from '@/components/Channel.vue'
import Status from '@/components/Status.vue'
export default {
  name: 'Artic',
  data () {
    return {
      form: {
        name: '',
        region: '',
        date: [],
        delivery: false,
        type: [],
        status: null,
        desc: '',
        channelId: null
      },
      // 列表数据
      list: [

      ],
      // 数据总数
      total_count: 0,
      // 当前页数
      curPage: 1
    }
  },
  methods: {
    // 请求数据列表
    async loadArticle () {
      // console.log('我是日期' + this.form.date)
      // console.log('我是状态' + this.status)
      // 声明日期范围
      let beginPubdate = null
      let endPubdate = null
      if (this.form.date) {
        beginPubdate = this.form.date[0]
        endPubdate = this.form.date[1]
      }
      const queryObj = {
        page: this.curPage,
        per_page: 10,
        // 为日期变量赋值,值是个数组
        begin_pubdate: beginPubdate,
        end_pubdate: endPubdate,
        status: this.form.status,
        channel_id: this.form.channelId
      }
      // 调用导入的方法
      try {
        const res = await this.$http({
          method: 'GET',
          url: '/mp/v1_0/articles',
          params: queryObj,
          channel_id: this.form.channelId

        })
        console.log('获取文章的文章', res)
        // 对列表赋值
        this.list = res.data.data.results
        // 对数据条数总数赋值
        this.total_count = res.data.data.total_count
      } catch {
        console.log('错误')
      }
    },
    // 分页功能-------start
    hPageChange (curPage) {
      this.curPage = curPage
      this.loadArticle()
    // 分页功能-------end
    },
    // 查询功能------------------start
    sSelect () {
      // this.isLoading = true
      this.loadArticle()
      // this.isLoding = false
    },
    // 查询功能------------------end
    // 删除功能-------------start
    hDelect (index, row) {
      console.log(1)
      this.$confirm('你确定要删除么')
        .then(
          async () => {
            const idStr = row.id.toString()
            console.log(idStr)
            try {
              const res = await this.$http({
                url: '/mp/v1_0/articles/' + idStr,
                method: 'DELETE'
              })
              console.log(res)
              this.loadArticle()
            } catch {
              this.$message.error('删除失败，目前只能删除草稿')
            }
          }).catch(() => {
          console.log('取消成功')
        })
    },
    // 删除功能-------------end
    // 编辑功能----------------------start
    hEdit (index, row) {
      const idStrs = row.id.toString()
      console.log(idStrs)
      this.$router.push('/editArticle/' + idStrs)
    }
    //  编辑功能----------------------end

  },
  created () {
    this.loadArticle()
  },
  components: {
    Channel,
    Status
  }

}
</script>
<style lang="less" >
.filter-card {
  margin-bottom: 30px;
}

.list-table {
  margin-bottom: 20px;
}
</style>
